<template>
	<view class="page">
		<!-- 导航头部 -->
		<view class="status_bar"></view>
		<view class="top">
			<view class="flex">
				<view class="navTitle" v-for="item in 2" :key="item">
					<view :class="{ active: isActive == item }" @click="checked(item)">{{ item == 1 ? '极速贷' : '大额贷' }}</view>
				</view>
			</view>
			<!-- 极速贷二级头部 -->
			<u-dropdown border-bottom menu-icon="play-left-fill" :class="{ drop2: isActive == 2 }" height="100" :key="isActive">
				<u-dropdown-item
					v-for="(item, index) in classData[isActive == 1 ? 'quickness' : 'big']"
					:key="index"
					v-model="item.value"
					:title="item.title"
					:options="item.ops"
				></u-dropdown-item>
			</u-dropdown>
		</view>
		<scroll-view :scroll-y="true" :key="isActive" scroll-top="0" :style="`height:${scrollHeight}px`" class="scroll">
			<!-- 极速贷内容 -->
			<view class="nav_item" v-if="isActive == 1">
				<FastMoney />
				<view v-if="ios" class="fixedView"></view>
			</view>
			<!-- 大额贷内容 -->
			<view class="nav_item" v-if="isActive == 2">
				<BigMoney />
				<view v-if="ios" class="fixedView"></view>
			</view>
		</scroll-view>
		<!-- 绝对定位的视图需要考虑 tabBar 遮挡的问题，bottom 应该加上 tabBar 的高度 -->
	</view>
</template>

<script>
import FastMoney from './components/fast.vue'
import { classData } from './data.js'
import ajax from '@/api'
import BigMoney from './components/bigMoney'
export default {
	components: { FastMoney, BigMoney },
	data() {
		return {
			isActive: 1,
			classData,
			windowHeight: 0,
			scrollHeight: 0,
			ios: this.$u.os() == 'ios'
		}
	},
	computed: {},
	watch: {},
	onLoad() {
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight
			}
		})
	},
	onShow() {
		this.init()
	},
	onReady() {},
	// 方法集合
	methods: {
		async init() {
			const result = await ajax.getSort()
			console.log(result)
		},
		checked(idx) {
			this.isActive = idx
		},
		async getElInfo() {
			let rectInfo = await this.$u.getRect('.top')
			this.scrollHeight = this.windowHeight - rectInfo.height - 44
		}
	},
	mounted() {
		this.getElInfo()
	},
	onHide() {},
	onUnload() {}
}
</script>
<style lang="scss" scoped>
.page {
	background-color: #ffffff;
}
// 极速贷和大额贷切换
.flex {
	display: flex;
	padding-bottom: 30rpx;
	justify-content: space-evenly;
	.navTitle {
		height: 60rpx;
		text-align: center;
		width: 120rpx;
		font-family: PingFang SC;
		font-size: 40rpx;
		color: #464646;
	}
	.active {
		color: #3478f2;
		position: relative;
		font-weight: bold;
	}
	.active::after {
		position: absolute;
		content: '';
		width: 120rpx;
		height: 8rpx;
		background: #0780fe;
		border-radius: 4rpx;
		left: 0;
		bottom: -10rpx;
	}
}
::v-deep .u-icon--right {
	transform: rotate(-90deg);
}
// 二级切换
.drop2 {
	padding: 0;
	justify-content: space-between;
	line-height: 100rpx;
}
// 滚动布局
.scroll {
	box-sizing: border-box;
	width: 100%;
	// padding-left: 32rpx;
}
.edgeInsetBottom {
	width: 700rpx;
	height: var(--window-bottom);
}

.fixedView {
	position: fixed;
	width: 750rpx;
	height: 30px;
	bottom: var(--window-bottom);
}
</style>
